<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link th:href="@{/bootstrap/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" media="screen"/>
    <title>检测量</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('检测量','检测量')"></div>
</div>

<div th:fragment="content" th:remove="tag">
    <div class="row" id="querycondition">
        <div class="col-xs-12">

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">查询条件</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <form role="form" id="queryForm"  method="post" >
                    <div class="box-body">
                        <div class="row">
                            <div class="col-xs-3">
                                <input type="text" th:name="provinceName" class="form-control input-sm" placeholder="省市"/>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="kaName" class="form-control input-sm" placeholder="客户名称"/>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="areaName" class="form-control input-sm" placeholder="区县"/>
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                    <input  th:name="startDate" class="form-control input-sm" type="text" th:value="${startDate}" readonly="readonly" placeholder="开始时间" />
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                            </div>
                            <div class="col-xs-3">
                                <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                    <input  th:name="endDate" class="form-control input-sm" type="text" th:value="${endDate}" readonly="readonly" placeholder="结束时间" />
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-xs-3">
                                <input type="text" th:name="storeName" class="form-control input-sm" placeholder="门店名称"/>
                            </div>
                            <div class="col-xs-3">
                                <input type="text" th:name="loginName" class="form-control input-sm" placeholder="工号"/>
                            </div>
                            <input type="hidden" th:name="empId" id="empQueryId" />
                            <input type="hidden" th:name="kaId" id="kaQueryId" />
                            <input type="hidden" th:name="storeId" id="storeQueryId" />
                            <shiro:hasRole name="sys_bd">
                                <input type="hidden" th:name="cityAgencyId" th:value="${session.authUser.userId}"/>
                            </shiro:hasRole>
                            <div class="col-xs-3">
                                <button id="btn-query" type="button" class="btn btn-primary pull-right btn-sm">查询
                                </button>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="whoAmI" hidden="hidden" th:text="${whoAmI}"></div>
    <div id="cityAgency" hidden="hidden" th:text="${cityAgency}"></div>

    <div class="row" id="maincontent">
        <div class="col-xs-12">

            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#kalist" data-toggle="tab" >客户列表</a>
                </li>
                <li><a href="#storelist" data-toggle="tab">门店列表</a></li>
                <li><a href="#emplist" data-toggle="tab">店员列表</a></li>
            </ul>

            <div id="myTabContent" class="tab-content">
                <div class="box tab-pane fade in active" id="kalist">
                    <div class="box-body">
                        <table id="dataTable1" class="table table-striped table-bordered table-hover table-condensed">
                            <thead id="kaTable">
                            <tr>
                                <shiro:hasAnyRoles name="sys_agency,sys_nationwide,sys_kaAgency">
                                <th>省份</th>
                                <th>城市</th>
                                <th>地市</th>
                                <th>城市经理</th>
                                </shiro:hasAnyRoles>
                                <th>客户名称</th>
                                <th>检测次数</th>
                                <th>检测台</th>
                                <th>回收总量</th>
                                <th>回收率</th>
                                <th>回收金额</th>
                                <th>等级</th>
                                <th>查看每日检测量</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="box tab-pane fade in" id="storelist">
                    <div class="box-body">
                        <table id="dataTable2" class="table table-striped table-bordered table-hover table-condensed">
                            <thead id="storeTable">
                            <tr>
                                <th>省份</th>
                                <th>城市</th>
                                <th>地市</th>
                                <th>客户名称</th>
                                <th>门店名称</th>
                                <th>检测次数</th>
                                <th>检测台</th>
                                <th>回收总量</th>
                                <th>回收率</th>
                                <th>回收金额</th>
                                <th>等级</th>
                                <th>查看每日检测量</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="box tab-pane fade in" id="emplist">
                    <div class="box-body">
                        <table id="dataTable3" class="table table-striped table-bordered table-hover table-condensed">
                            <thead id="empTable">
                            <tr>
                                <th>省份</th>
                                <th>城市</th>
                                <th>地市</th>
                                <th>客户名称</th>
                                <th>门店名称</th>

                                <th>员工工号</th>
                                <th>员工姓名</th>
                                <th>员工电话</th>


                                <th>检测次数</th>
                                <th>检测台</th>
                                <th>回收总量</th>
                                <th>回收率</th>
                                <th>回收金额</th>
                                <th>等级</th>
                                <th>查看每日检测量</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row" id="kadetailContent" hidden="hidden">
        <div class="box-header with-border">
            <a href='#kaQueryForm' id='backtomain' type="button" class="btn btn-primary  btn-sm" >返回</a>
        </div>

        <div id="main" class="box-body" style="height:400px;"/>

        <div class="box">
            <div class="box-body">
                <table id="dataTablekadetail" class="table table-striped table-bordered table-hover table-condensed" >

                    <thead>
                    <tr>
                        <th>省份</th>
                        <th>城市</th>
                        <th>地市</th>
                        <th>城市经理</th>
                        <th>客户名称</th>
                        <th>日期</th>
                        <th>检测次数</th>
                        <th>检测台</th>
                        <th>回收总量</th>
                        <th>回收率</th>
                        <th>回收金额</th>
                        <th>等级</th>
                    </tr>
                    </thead>
                </table>

            </div>
        </div>
    </div>

    <div class="row" id="storedetailContent" hidden="hidden">
        <div class="box-header with-border">
            <a href='#kaQueryForm' id='backtomain2' type="button" class="btn btn-primary  btn-sm" >返回</a>
        </div>



        <div id="main2" class="box-body" style="height:400px;"/>

        <div class="box">
            <div class="box-body">
                <table id="dataTablestoredetail" class="table table-striped table-bordered table-hover table-condensed" >

                    <thead>
                    <tr>
                        <th>省份</th>
                        <th>城市</th>
                        <th>地市</th>
                        <th>客户名称</th>
                        <th>门店名称</th>
                        <th>日期</th>
                        <th>检测次数</th>
                        <th>检测台</th>
                        <th>回收总量</th>
                        <th>回收率</th>
                        <th>回收金额</th>
                        <th>等级</th>
                    </tr>
                    </thead>
                </table>

            </div>
        </div>
    </div>

    <div class="row" id="empdetailContent" hidden="hidden">
        <div class="box-header with-border">
            <a href='#kaQueryForm' id='backtomain3' type="button" class="btn btn-primary  btn-sm" >返回</a>
        </div>



        <div id="main3" class="box-body" style="height:400px;"/>

        <div class="box">
            <div class="box-body">
                <table id="dataTableempdetail" class="table table-striped table-bordered table-hover table-condensed" >

                    <thead>
                    <tr>
                        <th>省份</th>
                        <th>城市</th>
                        <th>地市</th>
                        <th>客户名称</th>
                        <th>门店名称</th>

                        <th>员工工号</th>
                        <th>员工姓名</th>
                        <th>员工电话</th>
                        <th>日期</th>


                        <th>检测次数</th>
                        <th>检测台</th>
                        <th>回收总量</th>
                        <th>回收率</th>
                        <th>回收金额</th>
                        <th>等级</th>
                    </tr>
                    </thead>
                </table>

            </div>
        </div>
    </div>

    <!-- DataTables -->
    <script th:src="@{/charts/echarts.js}"></script>
    <script th:src="@{/charts/shine.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap-datetimepicker.js}" charset="UTF-8"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js}" charset="UTF-8"></script>
    <script >
        $(function () {

            var whoAmI = $("#whoAmI").text();
            var cityAgencyRole =$("#cityAgency").text();

            $('.form_date').datetimepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayBtn: true,
                startView: 'month',
                minView:'month',
                maxView:'decade',
                language:  'zh-CN',
                startDate:'2017-07-27',
                endDate:new Date()
            });
            var columstest = [];
            if (cityAgencyRole){
                columstest = [//对应上面thead里面的序列
                    {"data": 'kaName', defaultContent: "",
                        "render":function(data,type,full,callback) {
                            return /*<![CDATA[*/"<a href='javascript:;' id='showStore'>"+data+"</a>"/*]]>*/;
                        }
                    },
                    {"data": 'checkSum', defaultContent: ""},
                    {"data": 'checkRealSum', defaultContent: ""},
                    {"data": 'recyleSum', defaultContent: ""},
                    {"data": 'recyleRate', "render":function(data,type,full,callback) {
                        return data + "%";
                    }},
                    {"data": 'totalAmount', defaultContent: "0"},
                    {"data": null,defaultContent: "0"},
                    {"data": null, defaultContent: /*<![CDATA[*/"<a href='#kadetailContent' id='showkadetail' type='button' class='btn btn-primary  btn-sm'>查看详情</a>"/*]]>*/},
                ]
            }else {
                columstest = [//对应上面thead里面的序列
                    {"data": 'provinceName', defaultContent: ""},
                    {"data": 'cityName', defaultContent: ""},
                    {"data": 'areaName', defaultContent: ""},
                    {"data": 'cityAgencyName', defaultContent: ""},
                    {"data": 'kaName', defaultContent: "",
                        "render":function(data,type,full,callback) {
                            return /*<![CDATA[*/"<a href='javascript:;' id='showStore'>"+data+"</a>"/*]]>*/;
                        }
                    },
                    {"data": 'checkSum', defaultContent: ""},
                    {"data": 'checkRealSum', defaultContent: ""},
                    {"data": 'recyleSum', defaultContent: ""},
                    {"data": 'recyleRate', "render":function(data,type,full,callback) {
                        return data + "%";
                    }},
                    {"data": 'totalAmount', defaultContent: "0"},
                    {"data": null,defaultContent: "0"},
                    {"data": null, defaultContent: /*<![CDATA[*/"<a href='#kadetailContent' id='showkadetail' type='button' class='btn btn-primary  btn-sm'>查看详情</a>"/*]]>*/},
                ]
            }
            var katable = $("#dataTable1").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                pagingType: "full_numbers",
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/rp/checkSum/kalist",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: columstest,
                /*<![CDATA[*/

                dom: '<"toolbarkalist">frtip',
                /*]]>*/

                /*<![CDATA[*/
                //每加载完一行的回调函数
                createdRow: function (row, data, index) {
                    //修改单元格样式
                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                    var rate = data.recyleRate;
                    var realSum = data.checkRealSum;
                    var result = null;
                    if(rate <10)
                        result =  "<span class='label label-danger'>不达标</span>";
                    else if(realSum<10)
                        result =  "<span class='label label-danger'>不达标</span>";
                    else if(realSum > 50)
                        result =  "<span class='label label-success'>优秀</span>";
                    else result =  "<span class='label label-primary'>达标</span>";
                    $('td', row).eq(10).html(result);
                },
                /*]]>*/
                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },


                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }
            });
            $("div.toolbarkalist").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>');
            var storetable = $("#dataTable2").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                pagingType: "full_numbers",
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/rp/checkSum/storelist",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": 'provinceName', defaultContent: ""},
                    {"data": 'cityName', defaultContent: ""},
                    {"data": 'areaName', defaultContent: ""},
                    {"data": 'kaName', defaultContent: ""},
                    {"data": 'storeName', defaultContent: "",
                        "render":function(data,type,full,callback) {
                            return /*<![CDATA[*/"<a href='javascript:;' id='showEmp'>"+data+"</a>"/*]]>*/;
                        }
                    },
                    {"data": 'checkSum', defaultContent: ""},
                    {"data": 'checkRealSum', defaultContent: ""},
                    {"data": 'recyleSum', defaultContent: ""},
                    {"data": 'recyleRate', "render":function(data,type,full,callback) {
                        return data + "%";
                    }},
                    {"data": 'totalAmount', defaultContent: "0"},
                    /*<![CDATA[*/
                    {"data": null,defaultContent:"0"
                    },
                    /*]]>*/
                    {"data": null, defaultContent: /*<![CDATA[*/"<a href='#storedetailContent' id='showstoredetail' type='button' class='btn btn-primary  btn-sm'>查看详情</a>"/*]]>*/},
                ],
                /*<![CDATA[*/

                dom: '<"toolbarstorelist">frtip',
                /*]]>*/

                /*<![CDATA[*/
                //每加载完一行的回调函数
                createdRow: function (row, data, index) {
                    //修改单元格样式
                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                    var rate = data.recyleRate;
                    var realSum = data.checkRealSum;
                    var result = null;
                    if(rate <10)
                        result =  "<span class='label label-danger'>不达标</span>";
                    else if(realSum<10)
                        result =  "<span class='label label-danger'>不达标</span>";
                    else if(realSum > 50)
                        result =  "<span class='label label-success'>优秀</span>";
                    else result =  "<span class='label label-primary'>达标</span>";
                    $('td', row).eq(10).html(result);
                },
                /*]]>*/
                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },


                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }
            });

            if (whoAmI){
                $("div.toolbarstorelist").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
                    '<button type="button" class="btn btn-primary btn-sm" id="btn-down-all">导出所有excel</button>');
            }else {
                $("div.toolbarstorelist").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>');
            }


            var emptable = $("#dataTable3").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                pagingType: "full_numbers",
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/rp/checkSum/emplist",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": 'provinceName', defaultContent: ""},
                    {"data": 'cityName', defaultContent: ""},
                    {"data": 'areaName', defaultContent: ""},
                    {"data": 'kaName', defaultContent: ""},
                    {"data": 'storeName', defaultContent: ""},
                    {"data": 'loginName', defaultContent: ""},
                    {"data": 'empName', defaultContent: ""},
                    {"data": 'phone', defaultContent: ""},
                    {"data": 'checkSum', defaultContent: ""},
                    {"data": 'checkRealSum', defaultContent: ""},
                    {"data": 'recyleSum', defaultContent: ""},
                    {"data": 'recyleRate', "render":function(data,type,full,callback) {
                        return data + "%";
                    }},
                    {"data": 'totalAmount', defaultContent: "0"},

                    {"data": null,defaultContent:"0"
                    },

                    {"data": null, defaultContent: /*<![CDATA[*/"<a href='#storedetailContent' id='showempdetail' type='button' class='btn btn-primary  btn-sm'>查看详情</a>"/*]]>*/},
                ],
                /*<![CDATA[*/

                dom: '<"toolbaremplist">frtip',
                /*]]>*/

                /*<![CDATA[*/
                //每加载完一行的回调函数
                createdRow: function (row, data, index) {
                    //修改单元格样式
                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                    var rate = data.recyleRate;
                    var realSum = data.checkRealSum;
                    var result = null;
                    if(rate <10)
                        result =  "<span class='label label-danger'>不达标</span>";
                    else if(realSum<10)
                        result =  "<span class='label label-danger'>不达标</span>";
                    else if(realSum > 50)
                        result =  "<span class='label label-success'>优秀</span>";
                    else result =  "<span class='label label-primary'>达标</span>";
                    $('td', row).eq(13).html(result);
                },
                /*]]>*/
                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },


                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }
            });
            if(whoAmI){
                $("div.toolbaremplist").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
                    '<button type="button" class="btn btn-primary btn-sm" id="btn-down-brand">导出全部品牌</button>');
            }else {
                $("div.toolbaremplist").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>');
            }


            //查询按钮
            $("#btn-query").on("click", function () {

                $("#empQueryId").val(null);
                $("#kaQueryId").val(null);
                $("#storeQueryId").val(null);
                var loginName = $("input[name='loginName']").val();
                var storeName = $("input[name='storeName']").val();
                var areaName = $("input[name='areaName']").val();
                if(loginName.length != 0 || areaName.length != 0){
                    $("#myTab li:eq(2) ").find("a").click();
                    emptable.fnDraw();
                }else if(storeName.length != 0){
                    $("#myTab li:eq(1) ").find("a").click();
                    storetable.fnDraw();
                }else {
                    $("#myTab li:eq(0) ").find("a").click();
                    katable.fnDraw();
                }


            });


            //跳转图表 员工详情
            $("#dataTable3 tbody").on("click", "#showempdetail", function () {
                var data = emptable.api().row($(this).parents("tr")).data();
                $("#empdetailContent").prop("hidden",false);

                //传递参数
                $("#empQueryId").val(data.empId);
                /*<![CDATA[*/ var postData = "&" + data.empId/*]]>*/;
                getdata(postData,'/rp/checkSum/emplistChartByDay','main3');
                $("#maincontent").prop("hidden",true);
                $("#querycondition").prop("hidden",true);
                $("#dataTableempdetail").dataTable({
                    destroy:true,
                    bLengthChange:false,//去掉每页多少条框体
                    serverSide: true,//分页，取数据等等的都放到服务端去
                    processing: true,//载入数据的时候是否显示“载入中”
                    pageLength: 10,  //首次加载的数据条数
                    ordering: false,//排序操作在服务端进行，所以可以关了。
                    pagingType: "full_numbers",
                    autoWidth: false,
                    stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                    searching: false,
                    ajax: {   //类似jquery的ajax参数，基本都可以用。
                        type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                        url: "/rp/checkSum/emplistByDay",
                        dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                        data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                            var param = {}; //因为服务端排序，可以新建一个参数对象
                            param.draw = d.draw;
                            param.start = d.start;
                            param.length = d.length;
                            var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                            formData.forEach(function (e) {
                                param[e.name] = e.value;
                            });
                            return param;//自定义需要传递的参数。
                        }
                    },
                    columns: [//对应上面thead里面的序列
                        {"data": 'provinceName', defaultContent: ""},
                        {"data": 'cityName', defaultContent: ""},
                        {"data": 'areaName', defaultContent: ""},
                        {"data": 'kaName', defaultContent: ""},
                        {"data": 'storeName', defaultContent: ""},
                        {"data": 'loginName', defaultContent: ""},
                        {"data": 'empName', defaultContent: ""},
                        {"data": 'phone', defaultContent: ""},
                        {"data": 'day', defaultContent: ""},

                        {"data": 'checkSum', defaultContent: ""},
                        {"data": 'checkRealSum', defaultContent: ""},
                        {"data": 'recyleSum', defaultContent: ""},
                        {"data": 'recyleRate', "render":function(data,type,full,callback) {
                            return data + "%";
                        }},
                        {"data": 'totalAmount', defaultContent: "0"},
                        /*<![CDATA[*/
                        {"data": null,defaultContent:"0"
                        },
                        /*]]>*/
                    ],
                    /*<![CDATA[*/

                    dom: '<"toolbaremplistdetail">frtip',



                    //每加载完一行的回调函数
                    createdRow: function (row, data, index) {
                        //修改单元格样式
                        //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                        var rate = data.recyleRate;
                        var realSum = data.checkRealSum;
                        var result = null;
                        if(rate <10)
                            result =  "<span class='label label-danger'>不达标</span>";
                        else if(realSum<10)
                            result =  "<span class='label label-danger'>不达标</span>";
                        else if(realSum > 50)
                            result =  "<span class='label label-success'>优秀</span>";
                        else result =  "<span class='label label-primary'>达标</span>";
                        $('td', row).eq(14).html(result);
                    },
                    /*]]>*/
                    initComplete: function (setting, json) {
                        //初始化完成之后替换原先的搜索框。
                    },

                });
                $("div.toolbaremplistdetail").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-sm" id="btn-down-detail">导出回收详情</button>');
                //导出按钮
                $(".toolbaremplistdetail button#btn-down").on("click", function () {
                    var form = $("#queryForm");
                    form.attr('target','');
                    form.attr('method','post');
                    form.attr('action','/rp/checkSum/downloadExcel/emplistbyday');
                    form.submit();
                });
                //导出按钮
                $(".toolbaremplistdetail button#btn-down-detail").on("click", function () {
                    var form = $("#queryForm");
                    form.attr('target','');
                    form.attr('method','post');
                    form.attr('action','/rp/checkSum/downloadExcel/emplistbydaydetail');
                    form.submit();
                });
            })

            $("#dataTable2 tbody").on("click", "#showEmp", function () {
                var data = storetable.api().row($(this).parents("tr")).data();
                $("#storeQueryId").val(data.storeId);
                $("#myTab li:eq(2) ").find("a").click();
                emptable.fnDraw();
            })

            //跳转图表
            $("#dataTable2 tbody").on("click", "#showstoredetail", function () {
                var data = storetable.api().row($(this).parents("tr")).data();
                $("#storedetailContent").prop("hidden",false);

                //传递参数
                $("#storeQueryId").val(data.storeId);
                /*<![CDATA[*/ var postData = "&" + data.storeId/*]]>*/;
                getdata(postData,'/rp/checkSum/storelistChartByDay','main2');
                $("#maincontent").prop("hidden",true);
                $("#querycondition").prop("hidden",true);
                $("#dataTablestoredetail").dataTable({
                    searching:false, //去掉搜索框
                    destroy:true,
                    bLengthChange:false,//去掉每页多少条框体
                    serverSide: true,//分页，取数据等等的都放到服务端去
                    processing: true,//载入数据的时候是否显示“载入中”
                    pageLength: 10,  //首次加载的数据条数
                    ordering: false,//排序操作在服务端进行，所以可以关了。
                    pagingType: "full_numbers",
                    autoWidth: false,
                    stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                    ajax: {   //类似jquery的ajax参数，基本都可以用。
                        type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                        url: "/rp/checkSum/storelistByDay",
                        dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                        data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                            var param = {}; //因为服务端排序，可以新建一个参数对象
                            param.draw = d.draw;
                            param.start = d.start;
                            param.length = d.length;
                            var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                            formData.forEach(function (e) {
                                param[e.name] = e.value;
                            });
                            return param;//自定义需要传递的参数。
                        }
                    },
                    columns: [//对应上面thead里面的序列
                        {"data": 'provinceName', defaultContent: ""},
                        {"data": 'cityName', defaultContent: ""},
                        {"data": 'areaName', defaultContent: ""},
                        {"data": 'kaName', defaultContent: ""},
                        {"data": 'storeName', defaultContent: ""},
                        {"data": 'day', defaultContent: ""},
                        {"data": 'checkSum', defaultContent: ""},
                        {"data": 'checkRealSum', defaultContent: ""},
                        {"data": 'recyleSum', defaultContent: ""},
                        {"data": 'recyleRate', "render":function(data,type,full,callback) {
                            return data + "%";
                        }},
                        {"data": 'totalAmount', defaultContent: "0"},
                        /*<![CDATA[*/
                        {"data": null,defaultContent:"0"
                        },
                        /*]]>*/
                    ],
                    /*<![CDATA[*/

                    dom: '<"toolbarstorelistdetail">frtip',



                    //每加载完一行的回调函数
                    createdRow: function (row, data, index) {
                        //修改单元格样式
                        //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                        var rate = data.recyleRate;
                        var realSum = data.checkRealSum;
                        var result = null;
                        if(rate <10)
                            result =  "<span class='label label-danger'>不达标</span>";
                        else if(realSum<10)
                            result =  "<span class='label label-danger'>不达标</span>";
                        else if(realSum > 50)
                            result =  "<span class='label label-success'>优秀</span>";
                        else result =  "<span class='label label-primary'>达标</span>";
                        $('td', row).eq(11).html(result);
                    },
                    /*]]>*/
                    initComplete: function (setting, json) {
                        //初始化完成之后替换原先的搜索框。
                    },

                });
                $("div.toolbarstorelistdetail").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>');
                //导出按钮
                $(".toolbarstorelistdetail").on("click", function () {
                    var form = $("#queryForm");
                    form.attr('target','');
                    form.attr('method','post');
                    form.attr('action','/rp/checkSum/downloadExcel/storelistbyday');
                    form.submit();
                });
            })



            $("#dataTable1 tbody").on("click", "#showStore", function () {
                var data = katable.api().row($(this).parents("tr")).data();
                $("#kaQueryId").val(data.kaId);
                $("#myTab li:eq(1) ").find("a").click();
                storetable.fnDraw();
            })

            //跳转图表
            $("#dataTable1 tbody").on("click", "#showkadetail", function () {
                var data = katable.api().row($(this).parents("tr")).data();
                $("#kadetailContent").prop("hidden",false);
                //传递参数
                $("#kaQueryId").val(data.kaId);
                /*<![CDATA[*/ var postData = "&" + data.kaId/*]]>*/;
                getdata(postData,'/rp/checkSum/kalistChartByDay','main');
                $("#kadetailContent").prop("hidden",false);
                $("#maincontent").prop("hidden",true);
                $("#querycondition").prop("hidden",true);
                $("#dataTablekadetail").dataTable({
                    searching:false, //去掉搜索框
                    destroy:true,
                    bLengthChange:false,//去掉每页多少条框体
                    serverSide: true,//分页，取数据等等的都放到服务端去
                    processing: true,//载入数据的时候是否显示“载入中”
                    pageLength: 10,  //首次加载的数据条数
                    ordering: false,//排序操作在服务端进行，所以可以关了。
                    autoWidth: false,
                    ajax: {   //类似jquery的ajax参数，基本都可以用。
                        type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                        url: "/rp/checkSum/kalistByDay",
                        dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                        data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                            var param = {}; //因为服务端排序，可以新建一个参数对象
                            param.draw = d.draw;
                            param.start = d.start;
                            param.length = d.length;
                            var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                            formData.forEach(function (e) {
                                param[e.name] = e.value;
                            });
                            return param;//自定义需要传递的参数。
                        }
                    },
                    columns: [//对应上面thead里面的序列
                        {"data": 'provinceName', defaultContent: ""},
                        {"data": 'cityName', defaultContent: ""},
                        {"data": 'areaName', defaultContent: ""},
                        {"data": 'kaName', defaultContent: ""},
                        {"data": 'cityAgencyName', defaultContent: ""},
                        {"data": 'day', defaultContent: ""},
                        {"data": 'checkSum', defaultContent: ""},
                        {"data": 'checkRealSum', defaultContent: ""},
                        {"data": 'recyleSum', defaultContent: ""},
                        {"data": 'recyleRate', "render":function(data,type,full,callback) {
                            return data + "%";
                        }},
                        {"data": 'totalAmount', defaultContent: "0"},
                        /*<![CDATA[*/
                        {"data": null,defaultContent:"0"
                        },
                        /*]]>*/
                    ],
                    /*<![CDATA[*/

                    dom: '<"toolbarkalistdetail">frtip',



                    //每加载完一行的回调函数
                    createdRow: function (row, data, index) {
                        //修改单元格样式
                        //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                        var rate = data.recyleRate;
                        var realSum = data.checkRealSum;
                        var result = null;
                        if(rate <10)
                            result =  "<span class='label label-danger'>不达标</span>";
                        else if(realSum<10)
                            result =  "<span class='label label-danger'>不达标</span>";
                        else if(realSum > 50)
                            result =  "<span class='label label-success'>优秀</span>";
                        else result =  "<span class='label label-primary'>达标</span>";
                        $('td', row).eq(11).html(result);
                    },
                    /*]]>*/
                    initComplete: function (setting, json) {
                        //初始化完成之后替换原先的搜索框。
                    },

                });
                $("div.toolbarkalistdetail").html('<button type="button" class="btn btn-primary btn-sm" id="btn-down">导出excel</button>');
                //导出按钮
                $(".toolbarkalistdetail").on("click", function () {
                    var form = $("#queryForm");
                    form.attr('target','');
                    form.attr('method','post');
                    form.attr('action','/rp/checkSum/downloadExcel/kalistbyday');
                    form.submit();
                });
            })



            //返回首页
            $("#backtomain").on("click",null,function(){
                $("#kaQueryId").val(null);
                $("#storeQueryId").val(null);
                $("#empQueryId").val(null);
                $("#maincontent").prop("hidden",false);
                $("#querycondition").prop("hidden",false);
                $("#kadetailContent").prop("hidden",true);
            })

            //返回首页
            $("#backtomain2").on("click",null,function(){
                $("#kaQueryId").val(null);
                $("#storeQueryId").val(null);
                $("#empQueryId").val(null);
                $("#maincontent").prop("hidden",false);
                $("#querycondition").prop("hidden",false);
                $("#storedetailContent").prop("hidden",true);
            })

            //返回首页
            $("#backtomain3").on("click",null,function(){
                $("#kaQueryId").val(null);
                $("#storeQueryId").val(null);
                $("#empQueryId").val(null);
                $("#maincontent").prop("hidden",false);
                $("#querycondition").prop("hidden",false);
                $("#empdetailContent").prop("hidden",true);
            })

            function getdata(x,url,position){
                var chart = echarts.init(document.getElementById(position), 'shine');
                chart.resize();
                chart.showLoading();
                setTimeout(100);

                var querydata = $("#queryForm").serialize();

                /*<![CDATA[*/
                var queryData = querydata + x;
                /*]]>*/
                $.post( url,
                    queryData,
                    function (datas) {


                        var data = $.parseJSON(datas);
                        var recyleSums = [];
                        var realSums = [];
                        var days = [];
                        $.each(data, function (index, obj) {
                            recyleSums.push(obj.recyleSum);
                            realSums.push(obj.checkSum);
                            days.push(obj.day)
                        });

                        option = {
                            title: {
                                text: '统计图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['检测量','回收量']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {
                                        yAxisIndex: 'none'
                                    },
                                    dataView: {readOnly: false},
                                    magicType: {type: ['line', 'bar']},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis:  {
                                type: 'category',
                                boundaryGap: false,
                                //动态数据
                                data: days
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} 台'
                                }
                            },
                            series: [
                                {
                                    name:'检测量',
                                    type:'line',
                                    //动态数据
                                    data:realSums
                                },
                                {
                                    name:'回收量',
                                    type:'line',
                                    //动态数据
                                    data:recyleSums
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        chart.setOption(option);



                    });


                chart.hideLoading();
                window.onresize = chart.resize;


            }

            //导出按钮
            $(".toolbarkalist").on("click", function () {
                var form = $("#queryForm");
                form.attr('target','');
                form.attr('method','post');
                form.attr('action','/rp/checkSum/downloadExcel/kalist');
                form.submit();
            });
            //导出按钮
            $(".toolbarstorelist button#btn-down").on("click", function () {
                var form = $("#queryForm");
                form.attr('target','');
                form.attr('method','post');
                form.attr('action','/rp/checkSum/downloadExcel/storelist');
                form.submit();
            });
            //导出按钮
            $(".toolbarstorelist button#btn-down-all").on("click", function () {
                var form = $("#queryForm");
                form.attr('target','');
                form.attr('method','post');
                form.attr('action','/rp/checkSum/downloadExcel/storelistall');
                form.submit();
            });
            //导出按钮
            $(".toolbaremplist button#btn-down").on("click", function () {
                var form = $("#queryForm");
                form.attr('target','');
                form.attr('method','post');
                form.attr('action','/rp/checkSum/downloadExcel/emplist');
                form.submit();
            });

            //导出按钮
            $(".toolbaremplist button#btn-down-brand").on("click", function () {
                var form = $("#queryForm");
                form.attr('target','');
                form.attr('method','post');
                form.attr('action','/rp/checkSum/downloadExcel/emplistallbrand');
                form.submit();
            });

            //导出按钮
            $(".toolbaremplist button#btn-down-all").on("click", function () {
                var form = $("#queryForm");
                form.attr('target','');
                form.attr('method','post');
                form.attr('action','/rp/checkSum/downloadExcel/emplistall');
                form.submit();
            });




        })

    </script>


</div>
</body>
</html>
